<template>
  <div class="g-container">
    <!-- <h2>background-attachment: scroll;</h2>
    <h3>scroll 此关键字表示背景相对于元素本身固定， 而不是随着它的内容滚动。</h3>
    <div class="g-bgat-scroll">
      <div class="g-content">
        <p v-for="index of 100" :key="index">{{index}}</p>
      </div>
    </div>-->

    <!-- <h2>background-attachment: local;</h2>
    <h3>local 此关键字表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动， 并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。</h3>
    <div class="g-bgat-local">
      <div class="g-content">
        <p v-for="index of 100" :key="index">{{index}}</p>
      </div>
    </div>-->

    <!-- <h2>background-attachment: fixed;</h2>
    <h3>fixed 此关键字表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。</h3>
    <div class="g-bgat-fixed">
      <div class="g-content">
        <p v-for="index of 100" :key="index">{{index}}</p>
      </div>
    </div>-->

    <!-- 使用fixed来实现视觉滚动效果 -->
    <!-- <section class="g-word">Header</section>
    <section class="g-img1">IMG1</section>
    <section class="g-word">Content1</section>
    <section class="g-img2">IMG2</section>
    <section class="g-word">Content2</section>
    <section class="g-img3">IMG3</section>
    <section class="g-word">Footer</section>-->

    <!-- 水波纹 -->
    <div class="wave wave5"></div>
    <div class="wave wave4"></div>
    <div class="wave wave3"></div>
    <div class="wave wave2"></div>
    <div class="wave wave1"></div>
    <div class="wave wave0"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {};
  },
  created() {
    function getData() {
      let a = 10;
      function setData() {
        console.log(a, "kkkk");
      }
      setData();
    }
    getData();
  }
};
</script>


<style lang="scss" scoped>
$img1: "http://pic7.photophoto.cn/20080407/0034034859692813_b.jpg";
.wave {
  position: absolute;
  top: calc((100% - 30px) / 2);
  left: calc((100% - 30px) / 2);
  width: 30px;
  height: 30px;
  border-radius: 300px;
  background: url($img1);
  background-attachment: fixed;
  background-position: center center;
}
.wave0 {
  z-index: 2;
  background-size: auto 106%;
  -webkit-animation: w 1s forwards;
}
.wave1 {
  z-index: 3;
  background-size: auto 102%;
  -webkit-animation: w 1s 0.2s forwards;
}
.wave2 {
  z-index: 4;
  background-size: auto 104%;
  -webkit-animation: w 1s 0.4s forwards;
}
.wave3 {
  z-index: 5;
  background-size: auto 101%;
  -webkit-animation: w 1s 0.5s forwards;
}
.wave4 {
  z-index: 6;
  background-size: auto 102%;
  -webkit-animation: w 1s 0.8s forwards;
}
.wave5 {
  z-index: 7;
  background-size: auto 100%;
  -webkit-animation: w 1s 1s forwards;
}
@-webkit-keyframes w {
  0% {
    top: calc((100% - 30px) / 2);
    left: calc((100% - 30px) / 2);
    width: 30px;
    height: 30px;
  }
  100% {
    top: calc((100% - 300px) / 2);
    left: calc((100% - 300px) / 2);
    width: 300px;
    height: 300px;
  }
}
</style>


<style lang="scss" scoped>
$img1: "http://pic7.photophoto.cn/20080407/0034034859692813_b.jpg";

$img2: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F113020142315%2F201130142315-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657163263&t=39bf666270b5840432980d7a7d6ec6da";

$img3: "https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=";

section {
  height: 100vh;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  line-height: 100vh;
  text-align: center;
  font-size: 20vh;
}

.g-img1 {
  background-image: url($img1);
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}

.g-img2 {
  background-image: url($img2);
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}

.g-img3 {
  background-image: url($img3);
  background-attachment: fixed;
  background-size: cover;
  background-position: center center;
}
</style>


<style lang="scss" scoped>
$img: "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F113020142315%2F201130142315-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1657163263&t=39bf666270b5840432980d7a7d6ec6da";

.g-container {
  // width: 600px;
  width: 100%;
  min-height: 100vh;
  margin: 0px auto;
  padding: 0 0 20px 0;
}

h2 {
  text-align: left;
  padding: 60px 0 10px;
  font-size: 20px;
}

p {
  text-align: center;
  padding: 10px 0;
  font-size: 20px;
}

.g-bgat-scroll {
  height: 100%;
  border: 1px solid #000;
  overflow-x: hidden;
  overflow-y: scroll;
  background-image: url($img);
  background-size: cover;
  background-attachment: scroll;
}

.g-bgat-local {
  height: 100%;
  border: 1px solid #000;
  overflow-x: hidden;
  overflow-y: scroll;
  background-image: url($img);
  background-size: 100% cover;
  background-attachment: local;
}

.g-bgat-fixed {
  height: 100%;
  border: 1px solid #000;
  overflow-x: hidden;
  overflow-y: scroll;
  background-image: url($img);
  background-size: 100% cover;
  background-attachment: fixed;
}
</style>
